<script setup>
import { ref } from 'vue';

const activeIndex = ref(0);

const menuItems = ref([
  { title: '首页', icon: 'icon-a1'},
  { title: '菜单管理', icon: 'icon-a2' },
  { title: '系统设置', icon: 'icon-a3' },
  { title: '用户中心', icon: 'icon-a4' }
]);

const selectItem = (index) => {
  activeIndex.value = index;
};
</script>

<template>
<!--  <div class="menu-container"> -->
    <div 
      v-for="(item, index) in menuItems"
      :key="index"
      class="menu-item"
      :class="{ 'active': activeIndex === index }"
      @click="selectItem(index)"
    >
	<div>
      <i :class="['menu-icon', item.icon]"></i>
      <span class="menu-title">{{ item.title }}</span>
	  
	   <li
	            v-if="(index + 1) % 3 === 0 && index !== menuItems.length - 1"
	            class="abc"
	          ></li>

	  </div>
    </div>
	
	
	
	

	
	
	
	
	
	
<!--  </div> -->

   <div class="abc"></div>
      


 
  

</template>

<style scoped>
	
	.abc{
		    display: block;
		    height: 1px;
		    border-bottom: 1px solid rgba( 255,255,255 ,.04);
		    margin: 12px 24px 10px;
	}
	
	
	
	
/* 雪碧图基础样式 */
/* .menu-icon { */
/*  display: inline-block; */
/*  width: 24px;                                 */     /* 根据实际图标尺寸调整 */
/*  height: 24px; */
/*  background-image: url('../assets/nav1.png'); */            /* 替换为你的雪碧图路径 */
/*  background-repeat: no-repeat; */
/*  margin-right: 8px; */
/* } */





.menu-icon {
 display: inline-block;
 width: 24px;                                     /* 根据实际图标尺寸调整 */
 height: 24px;
 background-position:-0px 0px;
 background-size:1104px auto;
 background-image: url('../assets/nav1.png');            /* 替换为你的雪碧图路径 */
 background-repeat: no-repeat;
 margin-right: 8px;
} 


/* 各个图标定位 */

.icon-a1 { background-position: 0 0; }
.icon-a2 { background-position: -72px 0; }
/* style="background-position: -216px 0px; background-size: 1104px;" */
.icon-a3{ background-position: calc(72px*-2) 0; }
.icon-a4 { background-position:  calc(72px*-3) 0; }

/* 激活状态样式 */
.active .menu-icon {
  filter: brightness(0.8); /* 可根据需要调整激活状态效果 */
}

/* 原有布局样式保持 */
.menu-container {
  width: 200px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-item:hover {
  background: #f5f7fa;
}

.menu-item.active {
  background: #ecf5ff;
  color: #409eff;
}

.menu-title {
  font-size: 14px;
}
</style>